<template>
    <div>
    <!-- 三级分类组件 -->
      <Category :scene="scene"></Category>
       <!--展示某一个三级分类下的平台属性与属性值-->
       <el-card shadow="always" :body-style="{ padding: '20px' }" style="margin : 10px 0">
     <div v-show="scene==0">
      <el-button :disabled="!categoryStore.C3Id" type="primary" size="default" :icon="Plus"    @click="addAttr">添加属性</el-button>
      <el-table  border style="margin : 10px 0" :data="attrList">
        <el-table-column label="序号" type="index" width="80px" align="center"></el-table-column>
        <el-table-column label="属性名称" width="150px" prop="attrName" show-overflow-tooltip></el-table-column>
        <el-table-column label="属性值列表" >
          <template #="{row,$index}"> 
            <el-tag style="margin:0 4px ;" class="ml-2" type="success" v-for="(attrVal,index) in row.attrValueList" :key="attrVal.id">{{attrVal.valueName}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150px" >
          <template v-slot="{row,$index}">
            <el-button type="primary" size="small" :icon="Edit" @click="updateAttr(row)"></el-button>
          <el-button type="danger" size="small" :icon="Delete" @click="removeAttr(row)"></el-button>
          </template>
          
        </el-table-column>
      </el-table>
     </div>
     <div v-show="scene==1">
      <el-form ref="form" :inline="true">
        <el-form-item label="属性名">
          <el-input  placeholder="请你输入属性的名字" clearable v-model="attrParams.attrName"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" size="default" :icon="Plus" :disabled="!attrParams.attrName" @click="addAttrValue" >添加属性值</el-button>
      <el-button size="default"  @click="cancel">取消</el-button>
      <el-table  border stripe style="margin:15px 0 ;" :data="attrParams.attrValueList">
        <el-table-column label="序号" type="index" align="center" width="80px">
        </el-table-column>
        <el-table-column label="属性值名称" >
          <template #="{row,$index}">
            <el-input :ref="(vc)=>inputArr[$index] = vc" v-if="row.flag" v-model="row.valueName" placeholder="请输入属性值" size="small" clearable @blur="toLook(row,$index)"></el-input>
            <div v-else @click="toEdit(row,$index)">{{ row.valueName }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #="{row,$index}">
            <el-button type="danger" size="small" :icon="Delete" @click="attrParams.attrValueList.splice($index,1)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" size="default" :disabled="attrParams.attrValueList.length>0?false:true" @click="save" >保存</el-button>
      <el-button size="default" @click="cancel">取消</el-button>
      
      
     </div>
        
       </el-card>
        
       
    </div>
</template>

<script setup lang="ts">
// 引入消息提示组件
import { ElMessage } from "element-plus";

//引入数据类型
import type {attrResponseData,attrModel,attrValueModel} from '@/api/product/attr/model/attr'
// 引入请求接口
import {reqAttrList,reqAddOrUpdateAttr,reqDeleteAttr} from '@/api/product/attr/attr'
import { Delete, Edit, Search, Share, Upload,Plus } from '@element-plus/icons-vue'
import { watch,ref,reactive,nextTick ,onUnmounted} from 'vue'
// 引入仓库
import useCategoryStore from '@/stores/category'
// 引入lodash中的深拷贝
import _ from "lodash";

// 获取仓库
let categoryStore = useCategoryStore()
// 定义存储平台属性的数据
let attrList = ref<attrResponseData>([])
// 定义响应式变量,控制场景切换
let scene = ref<number>(0)
//定义数组ref类型数据，将来存储el-input组件的实例
let inputArr = ref<any>([]);
// 定义将来添加或修改属性的参数
let attrParams = reactive<attrModel>({
  
  attrName: "",
  categoryLevel:3,
  categoryId:'',
  attrValueList: [
    // {valueName: ''}
  ],


})

watch(()=>categoryStore.C3Id,()=>{
      if(categoryStore.C3Id=='')return;
      // 获取平台属性方法
      getAttrList()
})

// 获取商品属性
const getAttrList = async ()=>{
    let result = await reqAttrList(categoryStore.C1Id,categoryStore.C2Id,categoryStore.C3Id)
    // console.log(result);
    attrList.value = result
    
}

// 添加属性按钮回调
const addAttr = ()=>{
  Object.assign(attrParams.attrValueList,{
    
  attrName:"",
  categoryLevel:3,
  categoryId:categoryStore.C3Id,
  attrValueList: [],
  })
  scene.value = 1
}

// 取消按钮回调
const cancel = ()=>{
  scene.value = 0
}

// 添加属性值按钮回调
const addAttrValue = ()=>{
  attrParams.attrValueList.push({
    valueName: "",
     //给每一个属性值添加标记:用来切换编辑模式与查看模式
     flag:true,
  });

//获取el-input组件实例,数组最后这个元素
  nextTick(()=>{
     inputArr.value[attrParams.attrValueList.length-1].focus()
  })
}

// 表单失去焦点回调变为查看模式
const toLook = (row:attrValueModel,$index:number)=>{
  if(row.valueName.trim() ==''){
    ElMessage({
      type: "warning",
      message: "亲爱的属性值不能为空",
    });
    // 属性值数组把当前非法属性值对象删除
    attrParams.attrValueList.splice($index,1)
    return
  }
  // 属性值重名
  let repeat = attrParams.attrValueList.find((item)=>{
        if(row!=item){
          return row.valueName === item.valueName;
        }
  })

  // 如果出现重复
  if(repeat){
    ElMessage({
      type:'warning',
      message:`${repeat.valueName}重复了`
    }) 
    // 属性值数组把当前非法属性值对象删除
    attrParams.attrValueList.splice($index,1)
    return
  }

   row.flag = false
}

// div点击事件,切换为编辑模式
const toEdit = (row:attrValueModel,$index:number) => {
  row.flag = true;
  // 点击div切换显示编辑,需要聚焦
  nextTick(()=>{
     inputArr.value[$index].focus()
  })
};

// 点击保存按钮的回调
const save = async ()=>{
// 整理参数,属性值数组flag属性不要
attrParams.attrValueList.forEach((item)=>{
  // hasOwnProperty("flag")方法 是用来检测属性是否为对象的自有属性，
  // 如果是，返回true，否者false; 参数propertyName指要检测的属性名；
  // 这个方法会查找一个对象是否有某个属性，但是不会去查找它的原型链。
    if(item.hasOwnProperty('flag')){
      // 删除某一个属性
      delete item.flag
    }
})
  // 发请求
  try {
    await reqAddOrUpdateAttr(attrParams)
    // 切换场景
    scene.value=0
    // 成功提示
    ElMessage({
      type:'success',
      message:attrParams.id?'属性修改成功':'属性添加成功'
    })
    // 获取最新数据
    getAttrList()
  } catch (error) {
    // 失败提示
    ElMessage({
      type:'error',
      message:attrParams.id?'属性修改失败':'属性添加失败'
    })
  }
}

// 修改按钮回调
const updateAttr = (row:attrModel)=>{
  // 切换场景
  scene.value = 1
    //row:即为用户想要修改的已有的属性与属性值
  //目前底下的写法：是将row，基本类型数值深拷贝[属性名]，引用类型数值浅拷贝[属性值]
  //深拷贝:JSON.parse + JSON.stringify
  Object.assign(attrParams,_.cloneDeep(row))
}

// 删除按钮的回调
const removeAttr =async (row:attrModel)=>{
  try {
    // 发请求删除已有数据成功
    await reqDeleteAttr(row.id)
    // 成功信息
    ElMessage({
      type: "success",
      message: `删除${row.attrName}成功`,
       duration:500,//约束提示信息的事件
    });
    //再次获取最新的属性的数据
    getAttrList();
  } catch (error) {
    ElMessage({
      type: "error",
      message: `删除${row.attrName}失败`,
     
    });
 
  }

}

// 组件销毁钩子
onUnmounted(() => {
   //组件销毁的时候。情况仓库里面的数据
  categoryStore.C1Id='',
  categoryStore.C1List=[]
  categoryStore.C2Id='',
  categoryStore.C2List=[]
  categoryStore.C3Id='',
  categoryStore.C3List=[]
  
})
</script>

<style scoped>

</style>